<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>搜索</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="css/mui.min.css" rel="stylesheet" />
		<style type="text/css">
			.mui-bar-nav {
				box-shadow: none;
			}
			
			.box {
				padding: 10px 5%;
				display: flex;
				background: linear-gradient(to right, #4860fb, #84aee9);
			}
			.mui-search{
				flex: 1;
			}
			.mui-search input[type=search] {
				background: white;
				margin: 0;
			}
			
			.mui-search:before {
				padding-top: 8px;
			}
			#btn{
				flex: 0 0 54px;
			}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">搜索</h1>
		</header>
		<div class="mui-content" id="app">
			<div class="box">
				<div class="mui-input-row mui-search">
					<input id="sousuo" v-model="val" type="search" class="mui-input-clear" placeholder="公园">
				</div>
				<button id="btn" type="button" class="mui-btn mui-btn-blue">搜索</button>
			</div>
			<!--<ul class="mui-table-view">
				<li :id="val.id" class="mui-table-view-cell" v-for="(val, index) of 5" :key="val.id">
					<a href="javascript:;" class="mui-navigate-right">
						<img class="mui-media-object mui-pull-left" src="images/pic1.png">
						<div class="mui-media-body mui-ellipsis">
							南宁人民公园
							<p class="mui-ellipsis">南宁市青秀区双拥路1号 </p>
						</div>
					</a>
				</li>
			</ul>-->
		</div>

	</body>

</html>
<script src="js/mui.min.js"></script>
<script src="js/vue.js"></script>
<script src="js/jquery.js"></script>
<script type="text/javascript">
	mui.init();
	var app = new Vue({
		el: '#app',
		data: {
val:'',
		}
	});
	
	mui("body").on('tap', '#btn', function() {
		var val = app.val;
		cun('comName', $("#sousuo").val());
		cun('KEY', '');
		gbtiao('list');
	})


</script>